<template>
  <scroll-view
      :scroll-y="true"
      :style="{
            height: 'calc(100vh)',
        }"
      class="page"
      @touchmove.stop
  >
    <view class="navbar">
      <navbar title="消费明细"> </navbar>
    </view>
    <view class="shop-box">
      <view class="branch">
        <view class="iconfont vivipos-icon-shangdian branch-icon"></view>
        <view class="branch-name">{{ order_info.branch_name?order_info.branch_name: '未设置门店' }}</view>
      </view>
      <view class="cust-sum">{{ (!order_info.cust_sum || order_info.cust_sum == 0) ? 1 :  order_info.cust_sum}}人</view>
    </view>
    <view class="detail" style="margin-top: 0">
      <view class="row">
        <view class="u-col-6">桌台/取餐号</view>
        <view class="u-col-6 text-right table_no">{{ tableNo_mealNumber }}</view>
      </view>
      <view class="border-line border-line--gray"></view>
      <view class="row">
        <view class="u-col-3">交易时间</view>
        <view class="u-col-9 text-right">{{ payment[0].payment_time }}</view>
      </view>
    </view>
    <view class="ordering-box">
      <view class="good-list">
        <block v-for="(good, key) in cart_info" :key="key">
          <block>
            <view class="border-line border-line--gray" v-if="key!=0"></view>
            <view class="good-row">
              <view class="u-col-6">
                <view :class="good.product_kind == 3 ? 'good-name combos-dtl-name' : 'good-name'">{{good.product_kind==3 ? '-' : ''}}{{ good.product_name }}</view>
                <view class="good-spce">{{good.product_kind==3 ? ' ' : ''}}{{ good.food_property }}</view>
              </view>
              <view class="u-col-2">
                <view class="good-number">x{{ good.qty }}</view>
              </view>
              <view class="u-col-4">
                <view class="good-price price">
                  <view style="width:100%;text-align:right;margin-right:10rpx;">
                    <text class="icon" v-if="good.tag == 4">会员价</text>
                    <text class="icon" v-if="good.tag == 1">特价</text>
                    ￥{{ good.total}}
                  </view>
                </view>
                <view class="gray" v-if="good.tag!=0">
                  ￥{{ good.current_price }}
                </view>
              </view>
            </view>
          </block>
        </block>
      </view>
      <view class="price-box">
        <view class="border-line border-line--gray" v-if="order_info.box_price > 0"></view>
        <view class="lunch-box-fee" v-if="order_info.box_price > 0">
          <view class="u-col-6">
            <view class="left">餐盒费</view>
          </view>
          <view class="u-col-2">
            <view class="good-number">x1</view>
          </view>
          <view class="u-col-4">
            <view class="right price">￥{{ order_info.box_price }}</view>
          </view>
        </view>
        <!--                <view class="border-line border-line&#45;&#45;gray"></view>-->
        <!--                <view class="good-row coupon-row">-->
        <!--                    <view class="u-col-6">-->
        <!--                        <view v-if="fullPriceType == 1" class="good-name" style="color: #f9ae3d">-->
        <!--                            满200减20-->
        <!--                        </view>-->
        <!--                        <block v-if="fullPriceType == 2">-->
        <!--                            <view class="good-name" style="color: #f9ae3d"> 醋溜花生米 </view>-->
        <!--                            <view class="good-spce">份</view>-->
        <!--                        </block>-->
        <!--                    </view>-->
        <!--                    <view class="u-col-2">-->
        <!--                        <view class="good-number">-->
        <!--                            <block v-if="fullPriceType == 2">x1</block>-->
        <!--                        </view>-->
        <!--                    </view>-->
        <!--                    <view class="u-col-4">-->
        <!--                        <view class="good-price price">-->
        <!--                            <view class="icon">-->
        <!--                                <text v-if="fullPriceType == 1">满额减价</text>-->
        <!--                                <text v-if="fullPriceType == 2">满额赠菜</text>-->
        <!--                            </view>-->
        <!--                            <view v-if="fullPriceType == 1"> -￥20 </view>-->
        <!--                            <view v-if="fullPriceType == 2"> ￥0 </view>-->
        <!--                        </view>-->
        <!--                        <view class="gray" v-if="fullPriceType == 2"> ￥10 </view>-->
        <!--                    </view>-->
        <!--                </view>-->
        <!--                <view class="good-row coupon-row" v-if="currentCoupon != null">-->
        <!--                    <view class="u-col-6">-->
        <!--                        <view class="good-coupon" style="color: #f9ae3d; font-size: 34rpx">-->
        <!--                            <image-->
        <!--                                style="height: 50rpx; width: 70rpx"-->
        <!--                                src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/coupon_bg.png"-->
        <!--                                mode="scaleToFill"-->
        <!--                            />-->
        <!--                            <view class="icon-text">{{ currentCoupon.icon_text }}</view>-->
        <!--                            <view class="title">{{ currentCoupon.title }}</view>-->
        <!--                        </view>-->
        <!--                    </view>-->
        <!--                    <view class="u-col-2">-->
        <!--                        <view class="good-number"> </view>-->
        <!--                    </view>-->
        <!--                    <view class="u-col-4">-->
        <!--                        <view class="good-price price" style="color: red">-->
        <!--                            <view> -￥4 </view>-->
        <!--                        </view>-->
        <!--                    </view>-->
        <!--                </view>-->
        <view class="border-line border-line--black" v-if="cart_info && cart_info.length>0"></view>
        <view class="total-price">
          <view class="left u-col-4"> 总价：￥{{ order_info.total?order_info.total:0 | numFilter }} </view>
          <view class="center u-col-4"> 优惠：￥{{ order_info.discount_money?order_info.discount_money:0 | numFilter }} </view>
          <view class="right u-col-4"> 应付：￥{{ order_info.payment_amt?order_info.payment_amt:0 |  numFilter}}  </view>
        </view>
      </view>
    </view>
    <view class="detail">
      <view class="row">
        <view class="u-col-6">支付方式</view>
        <view class="u-col-3 text-right">{{ payment[0].payment_name }}</view>
        <view class="u-col-3 text-right price">￥{{ (payment[0]?payment[0].pay_money: 0) | numFilter }}</view>
      </view>
      <view class="border-line border-line--gray"></view>
      <view class="row">
        <view class="u-col-3">订单编号</view>
        <view class="u-col-9 text-right" style="overflow: hidden;font-size: 28rpx">{{order_info.order_no}}</view>
      </view>
      <view class="border-line border-line--gray"></view>
      <view class="row">
        <view class="u-col-3">备注</view>
        <view class="u-col-9 text-right">
          {{ order_info.cust_note?order_info.cust_note:"无" }}
        </view>
      </view>
      <!--            <view class="row">-->
      <!--                <view class="u-col-3">优惠说明</view>-->
      <!--                <view class="u-col-9 text-right text-red">-->
      <!--                    <view class="text-right">免费咖啡券x1</view>-->
      <!--                    <view class="text-right">5源代金券x1</view>-->
      <!--                </view>-->
      <!--            </view>-->
    </view>
  </scroll-view>
</template>

<script>
import { mapState } from "vuex"; //引入mapState
import PageApi from "@/api/page"
export default {
  data() {
    return {
      lunch_box_fee: 9, // 餐盒费
      fullPriceType: 2, // 满额类型
      showMore: false, // 展开更多,
      payStatus: 0, // 0等待  1 成功 -1 失败
      errorMessage: '',
      cart_info: [],
      coupons: [],
      discount: [],
      is_cust_sum: false,
      order_info: {},
      payment: {},
      order_id: ''
    };
  },
  computed: {
    ...mapState({
      client_sn: (state) => state.cart.client_sn,
      // order_id: (state) => state.cart.order_id,
      CartOrderInfo: (state) => state.cart.order_info // 购物车orderInfo
    }),
    tableNo_mealNumber() {
      let d = ''
      if(this.order_info.table_no && this.order_info.table_no.length>0){
        d+=this.order_info.table_no
      }
      if(d.length<=0){
        d= this.order_info.meal_number
      }else {
        if(this.order_info.meal_number && this.order_info.meal_number.length>0){
          d+=('/'+this.order_info.meal_number)
        }
      }

      return d
    },
    goodList: function () {
      let goodList = [];
      for (let key in this.cartGoods) {
        if (this.cartGoods[key].spceGoods != undefined) {
          for (let skey in this.cartGoods[key].spceGoods) {
            goodList.push(this.cartGoods[key].spceGoods[skey]);
          }
        } else {
          goodList.push(this.cartGoods[key]);
        }
      }
      return goodList;
    },
    // payment: function () {
    //   let payment = "";
    //   switch (this.$store.state.ordering.payment) {
    //     case "weixin":
    //       payment = "微信支付";
    //       break;
    //     case "zhifubao":
    //       payment = "支付宝";
    //       break;
    //   }
    //   return payment;
    // },
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  methods: {
    moreDetail(bool) {
      this.showMore = bool;
    },
    goHome() {
      uni.redirectTo({ url: "/pages/index/index" });
    },
    // 当前订单详情
    orderInfo() {
      PageApi.orderInfo({
        order_id: this.order_id
        // order_id: "307b4cf5a-f7fd-1f48-4984-34f51ce819d"
      }).then(res=>{
        if(res.code == 200){
          this.cart_info = res.data.cart_info
          this.coupons = res.data.coupons
          this.discount = res.data.discount
          this.is_cust_sum = res.data.is_cust_sum
          this.order_info = res.data.order_info
          this.payment = res.data.payment
        }
      })
    }
  },
  destroyed() {
    this.$store.commit("ordering/reset");
  },
  onLoad(options) {
    // console.log('xaxasxsaxsaxsaxasx')
    // 查询当前订单的支付状态信息
    // console.log(options)
    this.order_id = options.order_id
    this.orderInfo()
  }
};
</script>
<style lang="scss">
.text-right {
  text-align: right;
}

.detail {
  margin-top: 20rpx;
  background-color: #fff;
  .row {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 30rpx;
  }
}

.table_no {
  font-size: 38rpx;
  font-weight: 500;
}

.price {
  font-weight: 500;
}

.payment-box {
  background-color: #fff;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 40rpx;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 480rpx;
    height: 120rpx;
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    background-color: #f2f2f2;
    border-radius: 30rpx;
    .name {
      color: #9c9c9c;
      font-size: 34rpx;
    }
    .no {
      margin-top: 10rpx;
      color: red;
      font-size: 34rpx;
      font-weight: 700;
    }
  }
  .back {
    font-size: 38rpx;
    font-weight: 500;
    color: #f9ae3d;
    margin-top: 8rpx;
  }
}
.good-coupon {
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  .icon-text {
    width: 100rpx;
    margin-left: -70rpx;
    text-align: center;
    color: #f9ae3d;
    font-weight: 600;
    font-size: 24rpx;
    -webkit-transform-origin-x: 0; /*缩小后文字居左*/
    -webkit-transform: scale(0.7); /*关键*/
    transform: scale(0.7);
  }
  .title {
    font-size: 30rpx;
    margin-left: -20rpx;
  }
}

.shop-box {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 34rpx;
  margin-top: 5rpx;
  color: #666666;
  background-color: white;
  height: 50rpx;
  line-height: 50rpx;
  .branch{
    display: flex;
    .branch-icon{
      font-size: 36rpx;
      //padding-top: 2rpx;
    }
    .branch-name{
      padding-left: 10rpx;
    }
  }
}

.ordering-box {
  margin: 20rpx 0 !important;
  background-color: #fff;
}

.page {
  background-color: #f2f2f2;
}

.more-good {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50rpx;
  font-size: 30rpx;
  color: #666;
  background-color: #fff;
  padding: 30rpx;
}

.coupon-row {
  height: 80rpx !important;
}

.table-no {
  width: 100%;
  height: 140rpx;
  background-color: #f2f2f2;
  font-size: 34rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .no {
    color: red;
    font-size: 46rpx;
  }
}

.text-red {
  color: red;
}

.good-row {
  height: 140rpx;
  margin: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  .good-name {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 34rpx;
    margin-left: 10rpx;
  }
  .combos-dtl-name{
    font-size: 28rpx;
    color: #959595;
    margin-left: 20rpx;
  }

  .good-spce {
    color: #ccc;
    font-size: 26rpx;
    width: 100%;
    height: auto;
    margin-left: 10rpx;
  }

  .good-number {
    text-align: center;
  }

  .good-price {
    text-align: right;
    //margin-right: 30rpx;
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: 30rpx;
    .icon {
      font-size: 24rpx;
      margin-right: 8rpx;
      color: #f9ae3d;
    }
  }
  .gray {
    text-align: right;
    margin-right: 30rpx;
    color: #ccc;
    text-decoration: line-through;
    font-size: 26rpx;
  }
}

.price-box {
  .lunch-box-fee {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20rpx 0;
    height: 100rpx;
    .left {
      margin-left: 30rpx;
    }
    .right {
      text-align: right;
      margin-right: 30rpx;
    }
    .good-number {
      text-align: center;
    }
  }

  .total-price {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    padding: 40rpx 20rpx;
    .left {
      text-align: left !important;
    }
    .center {
      text-align: center !important;
      color: orange;
    }
    .right {
      text-align: right !important;
    }
  }
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.border-line {
  margin: 0 30rpx;
  height: 1px;
  background-size: 12px 1px;
  background-repeat: repeat-x;
  &--gray {
    background-image: linear-gradient(to right, #ccc 0%, #ccc 70%, transparent 0%);
  }
  &--black {
    background-image: linear-gradient(to right, #000 0%, #000 70%, transparent 0%);
  }
}
</style>
